<template>
  <div class="center">
    <h2>修改密码</h2>
    <table width="50%" border="0" cellpadding="0" cellspacing="1">
      <tr>
        <td width="25%" height="20" align="right" bgcolor="#f3f3f3">用户名</td>
        <td width="2%" align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td width="73%" height="20" align="left" bgcolor="#f3f3f3">
          <div align="left">{{ user.username }}</div>
        </td>
      </tr>
      <input type="hidden" value="gary" name="username"/>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">原始密码</td>
        <td align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" align="left" bgcolor="#f3f3f3">
          <div align="left">
            <input id="temp1" type="password" name="password" v-model="oldPassword"/>
          </div>
        </td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">新密码</td>
        <td align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" align="left" bgcolor="#f3f3f3">
          <div align="left">
            <input id="temp2" type="password" name="newpassword" v-model="newPassword"/>
          </div>
        </td>
      </tr>
      <tr>
        <td height="20" align="right" bgcolor="#f3f3f3">重复新密码</td>
        <td align="right" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" align="left" bgcolor="#f3f3f3">
          <div align="left">
            <input id="temp3" type="password" name="newdoublepassword" v-model="newPassword2"/>
          </div>
        </td>
      </tr>
      <tr>
        <td height="20" colspan="2" align="middle" bgcolor="#f3f3f3">&nbsp;</td>
        <td height="20" align="middle" bgcolor="#f3f3f3">
          <div align="left">
            <button @click="updatePassword()">确认更改</button>
          </div>
        </td>
      </tr>
    </table>

    <router-view/>
  </div>
</template>
<script>
import four from '../../util/four';

export default {
  data() {
    return {
      user: {},
      oldPassword: "",
      newPassword: "",
      newPassword2: "",
    }
  },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser() {
      let uid = JSON.parse(sessionStorage.getItem("userid"));
      four.get("/users/getById/" + uid).then((res) => {
        this.user = res.data.data;
      })
    },
    updatePassword() {
      if (this.oldPassword === this.user.password) {
        if (this.newPassword === this.newPassword2) {
          this.user.password = this.newPassword;
          four.put("/users", this.user).then((res) => {
            if (res.data.code == 20031) {
              this.$message.success("修改成功！请重新登录！");
              this.$router.push('/');
            }
            if (res.data.code == 20030) {
              this.$message.error("修改失败！");
            }
          })
        } else {
          this.$message.error("两次密码输入不一致！");
        }
      } else {
        this.$message.error("原密码错误！");
      }

    }
  }
}

</script>
<style scoped>
.center {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>